<!-- ProductDetail.vue - 商品详情页 -->
<template>
  <div class="product-detail-page">
    <!-- 返回按钮 -->
    <div class="back-btn">
      <el-button @click="$router.back()" icon="ArrowLeft" class="back-button">
        返回
      </el-button>
    </div>

    <!-- 加载状态 -->
    <div v-if="loading" class="loading-container">
      <el-skeleton :rows="10" animated />
    </div>

    <!-- 商品详情 -->
    <div v-else-if="product" class="product-detail">
      <el-row :gutter="30">
        <!-- 左侧：图片 -->
        <el-col :xs="24" :md="12">
          <div class="image-section">
            <!-- 图片容器 -->
            <div class="image-container">
            <el-image 
              :src="mainImage" 
              :preview-src-list="imageList"
              fit="contain"
              class="main-image"
              preview-teleported
            >
              <template #error>
                <div class="image-error">
                  <el-icon><PictureFilled /></el-icon>
                  <p>图片加载失败</p>
                </div>
              </template>
            </el-image>
              
              <!-- 图片装饰元素 -->
              <div class="image-decoration">
                <div class="decoration-circle circle-1"></div>
                <div class="decoration-circle circle-2"></div>
                <div class="decoration-circle circle-3"></div>
              </div>
            </div>
            
            <!-- 图片缩略图 -->
            <div class="thumbnail-list" v-if="imageList.length > 1">
              <div 
                v-for="(img, index) in imageList" 
                :key="index"
                class="thumbnail-item"
                :class="{ active: img === mainImage }"
                @click="mainImage = img"
              >
                <el-image :src="img" fit="cover" class="thumbnail-image" />
              </div>
            </div>
          </div>
        </el-col>

        <!-- 右侧：商品信息 -->
        <el-col :xs="24" :md="12">
          <div class="info-section">
            <!-- 商品名称 -->
            <div class="product-header">
            <h1 class="product-name">{{ product.productName }}</h1>
              <div class="product-badge">
                <!-- 商品状态标签 -->
                <el-tag 
                  :type="getStatusType(product.status)" 
                  size="small" 
                  effect="light"
                  class="status-tag">
                  {{ getStatusText(product.status) }}
                </el-tag>
                <el-tag type="success" size="small" effect="light">热销</el-tag>
              </div>
            </div>

            <!-- 收藏数 -->
            <div class="favorite-count">
              <el-icon><Star /></el-icon>
              <span>{{ favoriteCount }} 人收藏</span>
              <div class="count-animation"></div>
            </div>

            <!-- 价格区域 -->
            <div class="price-section">
              <div class="price-container">
              <div class="price-main">
                <span class="price-symbol">¥</span>
                <span class="price-value">{{ product.price }}</span>
                </div>
                <div class="price-decoration">
                  <div class="price-glow"></div>
                </div>
              </div>
              <div class="condition-tag">
                <el-tag :type="getOldLevelType(product.oldLevel)" size="large" effect="dark">
                {{ getOldLevelText(product.oldLevel) }}
              </el-tag>
              </div>
            </div>

            <!-- 商品信息卡片 -->
            <div class="product-info-card">
            <!-- 新旧程度 -->
            <div class="old-level-section">
                <div class="info-item">
                  <el-icon class="info-icon"><Star /></el-icon>
                  <span class="info-label">新旧程度</span>
                  <div class="info-value">
              <el-rate 
                v-model="product.oldLevel"
                disabled
                :max="10"
                show-score
                score-template="{value} 成新"
                      class="custom-rate"
              />
                  </div>
                </div>
            </div>

            <!-- 发布时间 -->
            <div class="publish-time">
                <div class="info-item">
                  <el-icon class="info-icon"><Clock /></el-icon>
                  <span class="info-label">发布时间</span>
                  <span class="info-value">{{ formatDate(product.creatTime) }}</span>
                </div>
              </div>
            </div>

            <!-- 操作按钮 -->
            <div class="action-buttons">
              <el-button 
                :type="isFavorited ? 'warning' : ''"
                :plain="!isFavorited"
                size="large"
                @click="handleToggleFavorite"
                :loading="favoriteLoading"
                :disabled="isOwnProduct"
                class="action-btn favorite-btn"
              >
                <el-icon><Star :class="{ filled: isFavorited }" /></el-icon>
                {{ isOwnProduct ? '自己的商品' : (isLoggedIn ? (isFavorited ? '已收藏' : '收藏') : '登录后收藏') }}
              </el-button>

              <el-button 
                type="success"
                size="large"
                @click="handleAddToCart"
                :loading="cartLoading"
                :disabled="isOwnProduct || isInCart || !isProductAvailable"
                class="action-btn cart-btn"
              >
                <el-icon><ShoppingCart /></el-icon>
                {{ getCartButtonText() }}
              </el-button>

              <el-button 
                type="primary"
                size="large"
                @click="handleBuyNow"
                :disabled="isOwnProduct || !isProductAvailable"
                class="action-btn buy-btn"
              >
                <el-icon><ChatDotRound /></el-icon>
                {{ getBuyButtonText() }}
              </el-button>
            </div>

            <!-- 商品描述 -->
            <div class="desc-section">
              <el-card class="desc-card" shadow="hover">
              <template #header>
                <div class="card-title">
                    <el-icon class="title-icon"><Document /></el-icon>
                    <span>商品描述</span>
                    <div class="title-decoration"></div>
                </div>
              </template>
              <div class="desc-content">
                  <div class="desc-text">
                    {{ product.productDetail || '暂无描述' }}
                  </div>
              </div>
            </el-card>
            </div>

            <!-- 卖家信息 -->
            <div class="seller-section">
              <el-card class="seller-card" shadow="hover">
              <template #header>
                <div class="card-title">
                    <el-icon class="title-icon"><User /></el-icon>
                    <span>卖家信息</span>
                    <div class="title-decoration"></div>
                </div>
              </template>
              <div class="seller-info">
                  <div class="seller-avatar-container">
                    <el-avatar :size="60" class="seller-avatar">
                  <el-icon><User /></el-icon>
                </el-avatar>
                    <div class="avatar-ring"></div>
                  </div>
                <div class="seller-meta">
                    <div class="seller-name">
                      <span class="label">卖家：</span>
                      <span class="name">{{ product.userDisplayName || `用户${product.userId}` }}</span>
                    </div>
                    <div class="seller-stats">
                      <div class="stat-item">
                        <el-icon><Star /></el-icon>
                        <span>信誉良好</span>
                      </div>
                      <div class="stat-item">
                        <el-icon><Clock /></el-icon>
                        <span>在线</span>
                      </div>
                    </div>
                  </div>
                </div>
              </el-card>
              </div>
          </div>
        </el-col>
      </el-row>
    </div>
  </div>
</template>

<script>
import { ref, computed, onMounted, onUnmounted } from 'vue'
import { ElMessage } from 'element-plus'
import { useRouter } from 'vue-router'
import { useCartStore } from '../../stores/cartStore'
import { useFavoriteStore } from '../../stores/favoriteStore'
import { productAPI, userAPI, favoriteAPI } from '@/api'
import {
  Star, Clock, ShoppingCart, ChatDotRound,
  PictureFilled, User, Document, ArrowLeft
} from '@element-plus/icons-vue'

export default {
  name: 'ProductDetail',
  components: {
    Star, Clock, ShoppingCart, ChatDotRound,
    PictureFilled, User, Document, ArrowLeft
  },
  setup() {
const router = useRouter()
    const cartStore = useCartStore()
    const favoriteStore = useFavoriteStore()

    // 响应式数据
const product = ref(null)
    const loading = ref(true)
    const favoriteLoading = ref(false)
    const cartLoading = ref(false)
    const currentUserId = ref(null)
    const mainImage = ref('')
    const imageList = ref([])

    // 计算属性
    const isLoggedIn = computed(() => !!localStorage.getItem('token'))
    const isOwnProduct = computed(() => 
      currentUserId.value && product.value && currentUserId.value === product.value.userId
    )
    
    // 从store获取收藏状态和数量
    const isFavorited = computed(() => 
      product.value ? favoriteStore.isFavorite(product.value.productId) : false
    )
    const favoriteCount = computed(() => 
      product.value ? favoriteStore.getFavoriteCount(product.value.productId) : 0
    )
    
    // 检查商品是否已在购物车中
    const isInCart = computed(() => {
      if (!product.value || !cartStore.isInCart) return false
      return cartStore.isInCart(product.value.productId)
    })

    // 商品状态相关函数
    const getStatusType = (status) => {
      const map = {
        'available': 'success',
        'reserved': 'warning', 
        'sold': 'info',
        'removed': 'danger'
      }
      return map[status] || 'info'
    }

    const getStatusText = (status) => {
      console.log('ProductDetail: getStatusText 被调用，状态:', status)
      const map = {
        'available': '在售',
        'reserved': '已预定',
        'sold': '已售出',
        'removed': '已下架'
      }
      const result = map[status] || '未知'
      console.log('ProductDetail: 状态文本结果:', result)
      return result
    }

    // 检查商品是否可购买
    const isProductAvailable = computed(() => {
      return product.value?.status === 'available'
    })

    // 检查商品是否已预定
    const isProductReserved = computed(() => {
      return product.value?.status === 'reserved'
    })

    // 检查商品是否已售出
    const isProductSold = computed(() => {
      return product.value?.status === 'sold'
    })

    const getCartButtonText = () => {
      if (isOwnProduct.value) return '自己的商品'
      if (!isLoggedIn.value) return '登录后购买'
      if (isProductSold.value) return '商品已售出'
      if (isProductReserved.value) return '商品已预定'
      if (product.value?.status === 'removed') return '商品已下架'
      if (isInCart.value) return '已在购物车'
      return '加入购物车'
    }

    const getBuyButtonText = () => {
      if (isOwnProduct.value) return '自己的商品'
      if (!isLoggedIn.value) return '登录后购买'
      if (isProductSold.value) return '商品已售出'
      if (isProductReserved.value) return '商品已预定'
      if (product.value?.status === 'removed') return '商品已下架'
      return '立即购买'
    }

    // 获取当前用户信息
    const fetchCurrentUser = async () => {
      try {
        // 检查登录状态
        const token = localStorage.getItem('token')
        if (!token || token.trim() === '') {
          console.log('ProductDetail: 用户未登录，跳过用户信息获取')
          return
        }
        
        const response = await userAPI.getUserInfo()
        if (response.code === 0) {
          currentUserId.value = response.data.user_id
        }
      } catch (error) {
        console.error('获取当前用户信息失败:', error)
        // 处理401错误，不显示错误消息
        if (error.response && error.response.status === 401) {
          console.log('ProductDetail: 用户未授权，跳过用户信息获取')
        }
      }
    }

    // 获取商品详情
    const fetchProductDetail = async () => {
      try {
        const productId = router.currentRoute.value.params.id
        const response = await productAPI.getProductDetail(productId)
    
    if (response.code === 0) {
      product.value = response.data
      console.log('ProductDetail: 商品详情数据:', product.value)
      console.log('ProductDetail: 商品状态:', product.value.status)
      console.log('ProductDetail: 商品状态类型:', typeof product.value.status)
      console.log('ProductDetail: 商品状态是否为空:', product.value.status === null || product.value.status === undefined || product.value.status === '')
      
      // 如果状态为空或未定义，设置默认值为 available
      if (!product.value.status || product.value.status === '') {
        console.log('ProductDetail: 商品状态为空，设置为默认值 available')
        product.value.status = 'available'
      }
      
      // 状态一致性检查
      console.log('ProductDetail: 商品状态检查完成:', {
        productId: product.value.productId,
        status: product.value.status,
        isAvailable: product.value.status === 'available',
        isReserved: product.value.status === 'reserved',
        isSold: product.value.status === 'sold',
        isRemoved: product.value.status === 'removed'
      })
      
          // 处理图片
          if (product.value.coverList && product.value.coverList.length > 0) {
            imageList.value = product.value.coverList
            mainImage.value = product.value.coverList[0]
          } else {
            imageList.value = []
            mainImage.value = ''
          }
          
          // 获取收藏状态和数量
          if (isLoggedIn.value) {
            await favoriteStore.checkFavoriteStatus(productId)
          }
          await favoriteStore.fetchFavoriteCount(productId)
          
          // 获取卖家信息
          if (product.value.userId) {
            try {
              const userResponse = await userAPI.getUserInfoById(product.value.userId)
              if (userResponse.code === 0) {
                product.value.userDisplayName = userResponse.data.displayName
              }
            } catch (error) {
              console.error('获取卖家信息失败:', error)
            }
          }
          
          // 获取收藏状态和数量
          if (isLoggedIn.value) {
            await favoriteStore.checkFavoriteStatus(productId)
          }
          await favoriteStore.fetchFavoriteCount(productId)
    }
  } catch (error) {
    console.error('获取商品详情失败:', error)
    ElMessage.error('获取商品详情失败')
  } finally {
    loading.value = false
  }
}

    // 切换收藏状态
const handleToggleFavorite = async () => {
      if (!isLoggedIn.value) {
        ElMessage.warning('请先登录')
        return
      }
      
      if (isOwnProduct.value) {
        ElMessage.warning('不能收藏自己发布的商品')
        return
      }
      
      favoriteLoading.value = true
      try {
        const result = await favoriteStore.toggleFavorite(product.value.productId)
        if (result.success) {
          ElMessage.success(result.isFavorite ? '收藏成功' : '取消收藏成功')
        } else {
          ElMessage.error(result.message)
        }
      } catch (error) {
        console.error('操作失败:', error)
        ElMessage.error('操作失败')
      } finally {
        favoriteLoading.value = false
      }
    }

// 加入购物车
const handleAddToCart = async () => {
      if (!isLoggedIn.value) {
        ElMessage.warning('请先登录')
        return
      }
      
      if (isOwnProduct.value) {
        ElMessage.warning('不能购买自己发布的商品')
        return
      }
      
      if (isInCart.value) {
        ElMessage.warning('该商品已在购物车中')
        return
      }
      
      cartLoading.value = true
      try {
        await cartStore.addCartItem(product.value, 1)
        ElMessage.success('已加入购物车')
      } catch (error) {
        console.error('加入购物车失败:', error)
        ElMessage.error('加入购物车失败')
      } finally {
        cartLoading.value = false
      }
    }

    // 立即购买
    const handleBuyNow = async () => {
      if (!isLoggedIn.value) {
        ElMessage.warning('请先登录')
        return
      }
      
      if (isOwnProduct.value) {
        ElMessage.warning('不能购买自己发布的商品')
        return
      }
      
      // 检查商品状态
      if (product.value.status === 'sold') {
        ElMessage.warning('该商品已售出，无法购买')
        return
      }
      
      if (product.value.status === 'reserved') {
        ElMessage.warning('该商品已被预定，无法购买')
        return
      }
      
      if (product.value.status === 'removed') {
        ElMessage.warning('该商品已下架，无法购买')
        return
      }
      
      if (product.value.status !== 'available') {
        ElMessage.warning('该商品当前不可购买')
        return
      }
      
      // 跳转到创建订单页面
      router.push(`/gear/create-order/${product.value.productId}`)
    }

    // 清理已售商品的相关数据
    const cleanSoldProductData = async (productId) => {
      try {
        console.log('ProductDetail: 开始清理已售商品数据:', productId)
        
        // 从收藏中移除
        await favoriteStore.cleanSoldProductFromFavorites(productId)
        
        // 从购物车中移除
        await cartStore.cleanSoldProductFromCart(productId)
        
        console.log('ProductDetail: 已售商品数据清理完成')
      } catch (error) {
        console.error('ProductDetail: 清理已售商品数据失败:', error)
      }
    }

    // 格式化日期
    const formatDate = (dateString) => {
      if (!dateString) return ''
      const date = new Date(dateString)
      return date.toLocaleString('zh-CN')
    }

    // 获取新旧程度文本
const getOldLevelText = (level) => {
      const levelMap = {
        1: '1成新', 2: '2成新', 3: '3成新', 4: '4成新', 5: '5成新',
        6: '6成新', 7: '7成新', 8: '8成新', 9: '9成新', 10: '全新'
      }
      return levelMap[level] || '未知'
    }

    // 获取新旧程度类型
const getOldLevelType = (level) => {
      if (level >= 8) return 'success'
  if (level >= 5) return 'warning'
  return 'danger'
}

    // 生命周期
    onMounted(() => {
      fetchCurrentUser()
      fetchProductDetail()
      
      // 监听购物车商品删除事件
      const handleCartItemDeleted = (event) => {
        const { productId } = event.detail
        if (productId === product.value?.productId) {
          // 如果删除的是当前商品，强制刷新购物车状态
          cartStore.fetchCartList()
        }
      }
      
      // 监听订单创建成功事件
      const handleOrderCreated = async (event) => {
        const { productId } = event.detail
        if (productId === product.value?.productId) {
          // 订单创建成功，清理相关数据并刷新商品状态
          console.log('ProductDetail: 检测到订单创建，清理相关数据并刷新商品状态')
          await cleanSoldProductData(productId)
          fetchProductDetail()
        }
      }
      
      // 监听订单取消事件
      const handleOrderCancelled = (event) => {
        const { productId } = event.detail
        if (productId === product.value?.productId) {
          // 订单取消，刷新商品状态
          console.log('ProductDetail: 检测到订单取消，刷新商品状态')
          fetchProductDetail()
        }
      }
      
      window.addEventListener('cartItemDeleted', handleCartItemDeleted)
      window.addEventListener('orderCreated', handleOrderCreated)
      window.addEventListener('orderCancelled', handleOrderCancelled)
      
      // 保存事件处理器引用，用于清理
      window._cartItemDeletedHandler = handleCartItemDeleted
      window._orderCreatedHandler = handleOrderCreated
      window._orderCancelledHandler = handleOrderCancelled
    })

    onUnmounted(() => {
      // 清理事件监听器
      if (window._cartItemDeletedHandler) {
        window.removeEventListener('cartItemDeleted', window._cartItemDeletedHandler)
        delete window._cartItemDeletedHandler
      }
      if (window._orderCreatedHandler) {
        window.removeEventListener('orderCreated', window._orderCreatedHandler)
        delete window._orderCreatedHandler
      }
      if (window._orderCancelledHandler) {
        window.removeEventListener('orderCancelled', window._orderCancelledHandler)
        delete window._orderCancelledHandler
      }
    })

    return {
      product,
      loading,
      favoriteCount,
      isFavorited,
      favoriteLoading,
      cartLoading,
      isLoggedIn,
      isOwnProduct,
      isInCart,
      isProductAvailable,
      isProductReserved,
      isProductSold,
      mainImage,
      imageList,
      handleToggleFavorite,
      handleAddToCart,
      handleBuyNow,
      getStatusType,
      getStatusText,
      getCartButtonText,
      getBuyButtonText,
      formatDate,
      getOldLevelText,
      getOldLevelType
    }
  }
}
</script>

<style scoped lang="scss">
$primary-color: #409eff;
$danger-color: #f56c6c;
$warning-color: #e6a23c;
$success-color: #67c23a;
$gradient-primary: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
$gradient-success: linear-gradient(135deg, #4facfe 0%, #00f2fe 100%);
$gradient-warning: linear-gradient(135deg, #fa709a 0%, #fee140 100%);

.product-detail-page {
  min-height: 100vh;
  background: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
  padding: 20px;
  max-width: 1400px;
  margin: 0 auto;
  position: relative;
  
  &::before {
    content: '';
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: radial-gradient(circle at 20% 80%, rgba(120, 119, 198, 0.3) 0%, transparent 50%),
                radial-gradient(circle at 80% 20%, rgba(255, 119, 198, 0.3) 0%, transparent 50%);
    pointer-events: none;
    z-index: 0;
  }
}

.back-btn {
  margin-bottom: 20px;
  position: relative;
  z-index: 1;
  
  .back-button {
    background: rgba(255, 255, 255, 0.9);
    backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 25px;
    padding: 12px 24px;
    font-weight: 500;
    transition: all 0.3s ease;
    
    &:hover {
      background: rgba(255, 255, 255, 1);
      transform: translateY(-2px);
      box-shadow: 0 8px 25px rgba(0, 0, 0, 0.1);
    }
  }
}

.loading-container {
  background: rgba(255, 255, 255, 0.95);
  backdrop-filter: blur(20px);
  border-radius: 20px;
  padding: 40px;
  border: 1px solid rgba(255, 255, 255, 0.2);
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.1);
}

.product-detail {
  background: rgba(255, 255, 255, 0.95);
  backdrop-filter: blur(20px);
  border-radius: 20px;
  padding: 40px;
  border: 1px solid rgba(255, 255, 255, 0.2);
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.1);
  position: relative;
  z-index: 1;
  
  &::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 4px;
    background: $gradient-primary;
    border-radius: 20px 20px 0 0;
  }
}

.image-section {
  position: sticky;
  top: 20px;
  
  .image-container {
    position: relative;
    border-radius: 20px;
    overflow: hidden;
    background: linear-gradient(135deg, #f8f9ff 0%, #e8f0ff 100%);
    padding: 20px;
    box-shadow: 0 15px 35px rgba(0, 0, 0, 0.1);

  .main-image {
    width: 100%;
    height: 500px;
      border-radius: 15px;
    overflow: hidden;
      border: 2px solid rgba(255, 255, 255, 0.8);
      box-shadow: 0 10px 30px rgba(0, 0, 0, 0.15);
      transition: all 0.3s ease;
      
      &:hover {
        transform: scale(1.02);
        box-shadow: 0 15px 40px rgba(0, 0, 0, 0.2);
      }

    .image-error {
      width: 100%;
      height: 100%;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
        background: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
      color: #909399;
        font-size: 16px;

      .el-icon {
          font-size: 48px;
          margin-bottom: 16px;
        }
      }
    }
    
    .image-decoration {
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      pointer-events: none;
      
      .decoration-circle {
        position: absolute;
        border-radius: 50%;
        background: linear-gradient(45deg, rgba(102, 126, 234, 0.1), rgba(118, 75, 162, 0.1));
        animation: float 6s ease-in-out infinite;
        
        &.circle-1 {
          width: 80px;
          height: 80px;
          top: 10%;
          right: 10%;
          animation-delay: 0s;
        }
        
        &.circle-2 {
          width: 60px;
          height: 60px;
          bottom: 20%;
          left: 15%;
          animation-delay: 2s;
        }
        
        &.circle-3 {
          width: 40px;
          height: 40px;
          top: 60%;
          right: 20%;
          animation-delay: 4s;
        }
      }
    }
  }
  
  .thumbnail-list {
    display: flex;
    gap: 12px;
    margin-top: 20px;
    padding: 0 20px;
    
    .thumbnail-item {
      width: 60px;
      height: 60px;
      border-radius: 12px;
      overflow: hidden;
      cursor: pointer;
      border: 2px solid transparent;
      transition: all 0.3s ease;
      
      &.active {
        border-color: $primary-color;
        transform: scale(1.1);
        box-shadow: 0 5px 15px rgba(64, 158, 255, 0.3);
      }
      
      &:hover {
        transform: scale(1.05);
        border-color: rgba(64, 158, 255, 0.5);
      }
      
      .thumbnail-image {
        width: 100%;
        height: 100%;
      }
    }
  }
}

@keyframes float {
  0%, 100% { transform: translateY(0px) rotate(0deg); }
  50% { transform: translateY(-20px) rotate(180deg); }
}

.info-section {
  .product-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 20px;
    
  .product-name {
      font-size: 32px;
      font-weight: 700;
      color: #2c3e50;
      margin: 0;
      background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
      background-clip: text;
      line-height: 1.2;
    }
    
    .product-badge {
      .el-tag {
        border-radius: 20px;
        padding: 8px 16px;
        font-weight: 600;
        box-shadow: 0 4px 15px rgba(103, 194, 58, 0.3);
      }
    }
  }

  .favorite-count {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 25px;
    padding: 12px 20px;
    background: linear-gradient(135deg, rgba(255, 193, 7, 0.1) 0%, rgba(255, 152, 0, 0.1) 100%);
    border-radius: 25px;
    border: 1px solid rgba(255, 193, 7, 0.2);
    position: relative;
    overflow: hidden;

    .el-icon {
      color: #ff9800;
      font-size: 18px;
    }
    
    span {
      color: #e65100;
      font-weight: 600;
      font-size: 16px;
    }
    
    .count-animation {
      position: absolute;
      top: 0;
      left: -100%;
      width: 100%;
      height: 100%;
      background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.4), transparent);
      animation: shimmer 3s infinite;
    }
  }

  .price-section {
    margin-bottom: 30px;
    
    .price-container {
      position: relative;
      display: inline-block;
      margin-bottom: 15px;

    .price-main {
        display: flex;
        align-items: baseline;
        gap: 4px;
        
      .price-symbol {
        font-size: 24px;
          font-weight: 600;
          color: #e74c3c;
      }

      .price-value {
          font-size: 48px;
          font-weight: 800;
          color: #e74c3c;
          text-shadow: 0 2px 4px rgba(231, 76, 60, 0.3);
        }
      }
      
      .price-decoration {
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        width: 120%;
        height: 120%;
        pointer-events: none;
        
        .price-glow {
          width: 100%;
          height: 100%;
          background: radial-gradient(circle, rgba(231, 76, 60, 0.1) 0%, transparent 70%);
          border-radius: 50%;
          animation: pulse 2s ease-in-out infinite;
        }
      }
    }
    
    .condition-tag {
      .el-tag {
        border-radius: 20px;
        padding: 10px 20px;
        font-weight: 600;
        font-size: 16px;
        box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
      }
    }
  }

  .product-info-card {
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.8) 0%, rgba(248, 249, 255, 0.8) 100%);
    border-radius: 20px;
    padding: 25px;
    margin-bottom: 30px;
    border: 1px solid rgba(255, 255, 255, 0.3);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.05);
    
    .info-item {
    display: flex;
    align-items: center;
    gap: 15px;
      margin-bottom: 20px;
      
      &:last-child {
        margin-bottom: 0;
      }
      
      .info-icon {
        color: $primary-color;
        font-size: 20px;
        width: 24px;
        text-align: center;
      }
      
      .info-label {
        font-weight: 600;
        color: #2c3e50;
        min-width: 80px;
      }
      
      .info-value {
        flex: 1;
        
        .custom-rate {
          .el-rate__icon {
            font-size: 18px;
          }
        }
      }
    }
  }

  .action-buttons {
    display: flex;
    gap: 15px;
    margin-bottom: 30px;

    .action-btn {
      flex: 1;
      height: 50px;
      border-radius: 25px;
      font-weight: 600;
      font-size: 16px;
      transition: all 0.3s ease;
      position: relative;
      overflow: hidden;
      
      &::before {
        content: '';
        position: absolute;
        top: 0;
        left: -100%;
        width: 100%;
        height: 100%;
        background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.3), transparent);
        transition: left 0.5s ease;
      }
      
      &:hover::before {
        left: 100%;
      }
      
      &.favorite-btn {
        background: linear-gradient(135deg, #ff9800 0%, #f57c00 100%);
        border: none;
        color: white;
        box-shadow: 0 8px 25px rgba(255, 152, 0, 0.3);
        
        &:hover {
          transform: translateY(-3px);
          box-shadow: 0 12px 35px rgba(255, 152, 0, 0.4);
        }
      }
      
      &.cart-btn {
        background: linear-gradient(135deg, #4caf50 0%, #388e3c 100%);
        border: none;
        color: white;
        box-shadow: 0 8px 25px rgba(76, 175, 80, 0.3);
        
        &:hover {
          transform: translateY(-3px);
          box-shadow: 0 12px 35px rgba(76, 175, 80, 0.4);
        }
      }
      
      &.buy-btn {
        background: linear-gradient(135deg, #2196f3 0%, #1976d2 100%);
        border: none;
        color: white;
        box-shadow: 0 8px 25px rgba(33, 150, 243, 0.3);
        
        &:hover {
          transform: translateY(-3px);
          box-shadow: 0 12px 35px rgba(33, 150, 243, 0.4);
        }
      }
    }
  }
}

.desc-section, .seller-section {
  margin-bottom: 30px;
  
  .desc-card, .seller-card {
    border-radius: 20px;
    border: 1px solid rgba(255, 255, 255, 0.3);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.05);
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.9) 0%, rgba(248, 249, 255, 0.9) 100%);
    backdrop-filter: blur(10px);
    transition: all 0.3s ease;
    
    &:hover {
      transform: translateY(-5px);
      box-shadow: 0 20px 40px rgba(0, 0, 0, 0.1);
    }

    .card-title {
      display: flex;
      align-items: center;
      gap: 12px;
      font-size: 18px;
      font-weight: 700;
      color: #2c3e50;
      position: relative;
      
      .title-icon {
        color: $primary-color;
        font-size: 20px;
      }
      
      .title-decoration {
        position: absolute;
        bottom: -8px;
        left: 0;
        width: 40px;
        height: 3px;
        background: linear-gradient(90deg, $primary-color, transparent);
        border-radius: 2px;
      }
    }
  }
    }

    .desc-content {
  .desc-text {
    font-size: 16px;
      line-height: 1.8;
    color: #5a6c7d;
    padding: 20px;
    background: rgba(255, 255, 255, 0.5);
    border-radius: 15px;
    border-left: 4px solid $primary-color;
  }
    }

    .seller-info {
      display: flex;
      align-items: center;
  gap: 20px;
  padding: 20px;
  
  .seller-avatar-container {
    position: relative;

      .seller-avatar {
      background: linear-gradient(135deg, $primary-color 0%, #667eea 100%);
      color: white;
      font-size: 24px;
      box-shadow: 0 8px 25px rgba(64, 158, 255, 0.3);
    }
    
    .avatar-ring {
      position: absolute;
      top: -5px;
      left: -5px;
      right: -5px;
      bottom: -5px;
      border: 2px solid rgba(64, 158, 255, 0.3);
      border-radius: 50%;
      animation: rotate 10s linear infinite;
    }
  }
  
  .seller-meta {
    flex: 1;
    
    .seller-name {
      margin-bottom: 12px;
      
      .label {
        font-weight: 600;
        color: #5a6c7d;
        margin-right: 8px;
      }
      
      .name {
        font-size: 18px;
        font-weight: 700;
        color: #2c3e50;
        background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
        background-clip: text;
      }
    }
    
    .seller-stats {
      display: flex;
      gap: 20px;
      
      .stat-item {
        display: flex;
        align-items: center;
        gap: 6px;
        font-size: 14px;
        color: #67c23a;
        font-weight: 600;
        
        .el-icon {
          font-size: 16px;
        }
      }
    }
  }
}

// 动画效果
@keyframes shimmer {
  0% { left: -100%; }
  100% { left: 100%; }
}

@keyframes pulse {
  0%, 100% { transform: translate(-50%, -50%) scale(1); opacity: 0.7; }
  50% { transform: translate(-50%, -50%) scale(1.1); opacity: 0.3; }
}

@keyframes rotate {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

// 响应式设计
@media (max-width: 768px) {
  .product-detail-page {
    padding: 10px;
  }
  
  .product-detail {
    padding: 20px;
  }
  
  .info-section {
    .product-header .product-name {
      font-size: 24px;
    }
    
    .price-section .price-container .price-main {
      .price-symbol {
        font-size: 20px;
      }
      
      .price-value {
        font-size: 36px;
    }
  }

  .action-buttons {
    flex-direction: column;

      .action-btn {
        width: 100%;
      }
    }
  }
  
  .seller-info {
    flex-direction: column;
    text-align: center;
    
    .seller-meta .seller-stats {
      justify-content: center;
    }
  }
}
</style>